<!DOCTYPE html>
<html lang="zh-cn">
    <head>
        <meta charset="UTF-8"/>
        <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
        <title>translateZ,perspective相册</title>
        <style>
            *{
                padding: 0;
                margin: 0;
            }
            .box-album{
                width: 1200px;
                min-height: 400px;
                padding: 100px 0;
                position: relative;
                perspective:800px;
                margin:0 auto 20px;
            }
            .container{
                height: 200px;
                width: 200px;
                position: absolute;
                margin-left: -100px;
                left:50%;
                transform-style:preserve-3d;
            }
            .piece {
                width: 200px;
                box-shadow: 0 1px 3px rgba(0,0,0,.5);
                -webkit-transition: opacity 1s, -webkit-transform 1s;
                -moz-transition: opacity 1s, -moz-transform 1s;
                transition: opacity 1s, transform 1s;
                position: absolute;
                bottom: 0;
            }
        </style>
    </head>
    <body>
        <div class="box-album">
            <div class="container" id="container">
            </div>
        </div>
        <script>
            (function() {
                if (typeof window.screenX === "number") {
                    // 随机颜色HSL
                    var randomHsl = function() {
                        return "hsla(" + Math.round(360 * Math.random()) + "," + "60%, 50%, .75)";
                    }
                    // CSS transform变换应用
                    , transform = function(element, value, key) {
                        key = key || "Transform";
                        ["Moz", "O", "Ms", "Webkit", ""].forEach(function(prefix) {
                            element.style[prefix + key] = value;    
                        }); 
                        
                        return element;
                    }
                    // 浏览器选择器API
                    , $ = function(selector) {
                        return document.querySelector(selector);
                    }, $$ = function(selector) {
                        return document.querySelectorAll(selector);
                    };
                    // 显示图片
                    var htmlPic = '', arrayPic = ['1 (1)', '1 (2)', '1 (3)', '1 (4)', '1 (5)', '1 (6)', '1 (7)', '1 (8)', '1 (9)'], rotate = 360 / arrayPic.length;
                    
                    arrayPic.forEach(function(i,index) {
                        var index = index + 1;
                        htmlPic = htmlPic + '<img id="piece'+ index +'" src="../../img/scenery1/'+ i +'.jpg" class="piece" />';    
                    });
                        
                    // 元素
                    var eleStage = $(".box-album"), eleContainer = $(".container"), indexPiece = 0;
                    // 元素
                    var elePics = $$(".piece"), transZ = 100 / Math.tan((rotate / 2 / 180) * Math.PI);
                    
                    eleContainer.innerHTML = htmlPic;
                    eleContainer.addEventListener("click", function() {
                        transform(this, "rotateY("+ (-1 * rotate * ++indexPiece) +"deg)");  
                    });
                    
                    arrayPic.forEach(function(i, j) {
                        var index = j + 1;
                        transform($("#piece" + index), "rotateY("+ j * rotate +"deg) translateZ("+ (transZ + 20) +"px)");   
                    }); 
                }  
                    
                    
                    
                    
                    // 垂直位置居中 - Chrome浏览器
                //     var funStageValign = function(element) {
                //         var scrollTop = document.documentElement.scrollTop, clientHeight = document.documentElement.clientHeight;
                //             offsetTop = element.getBoundingClientRect().top;
                        
                //         if (parseInt(window.getComputedStyle(element).top) === 0) {
                //             element.style.top = scrollTop + (window.innerHeight - 300) / 2 - offsetTop;
                //         } else {
                //             element.style.top = "0px";
                //         }
                //     };
                    
                //     if (/chrome/i.test(navigator.userAgent)) {
                //         // 创建Chrome浏览器视区修正按钮
                //         var eleButton = document.createElement("input");
                //         var arrValue = ["舞台位置窗体区域垂直居中", "垂直位置还原"];

                //         eleButton.type = "button";
                //         eleButton.value = arrValue[0];  
                //         eleButton.className = "chrome_fix";
                //         eleButton.addEventListener("click", function() {
                //             this.value = arrValue[Number(this.value !== arrValue[1])];
                //             var stage = this.parentNode;
                //             funStageValign(stage);
                //         });
                        
                //         eleStage.appendChild(eleButton);
                //     }           
                // } else {
                //     alert("你好，养猪场不是飞机场，是开不了战斗机的！"); 
                // }
            })();
        </script>
    </body>
</html>